<template>
	<div class="app-container">
		<el-tabs type="border-card">
		  <el-tab-pane label="净重管理">
				<div class="zd3">
				  <div class="zd3-title">
						<p>
							<span>净重</span>
							<input v-model="searchJz" type="text" placeholder="请输入净重" />
						</p>
						<h3 @click="getjing">查询</h3>
						<h4 @click="resetJing" style="margin: 0 30px;padding:0 10px">重置</h4>
				    <h3 @click="showJkg = true" style="padding:0 10px;background: #0093FF">净重添加</h3>
				  </div>
				  <div class="zd3-btm">
				    <el-table :data="jkgData" style="width: 100%;border-radius: 8px;" v-loading="loading">
				      <el-table-column type="index" align="center" label="序号" width="80" fixed="left" />
							<el-table-column align="center" prop="jingzhong" label="净重" />
							<el-table-column align="center" prop="insertTime" label="创建日期" />
							<el-table-column align="center" width="200" label="操作">
							  <template slot-scope="scope">
									<el-button type="text" size="small" @click="jkgWrite(scope.row,scope.$index)">修改</el-button>
							    <el-popconfirm
							      placement="top"
							      hideIcon
							      title="是否要删除此行？"
							      @onConfirm="deleteJing(scope.row)"
							    >
							      <el-button type="text" size="small" slot="reference">删除</el-button>
							    </el-popconfirm>
							  </template>
							</el-table-column>
				    </el-table>
				    <el-pagination
				      background
				      hide-on-single-page
				      layout="prev, pager, next"
				      :total="total"
				      @prev-click="goPrev"
				      @next-click="goNext"
				    />
				  </div>
				</div>
			</el-tab-pane>
		  <el-tab-pane label="毛重管理">
				<div class="zd3">
				  <div class="zd3-title">
						<p>
							<span>毛重</span>
							<input v-model="searchMz" type="text" placeholder="请输入毛重" />
						</p>
						<h3 @click="getmao">查询</h3>
						<h4 @click="resetMao" style="margin: 0 30px;padding:0 10px">重置</h4>
				    <h3 @click="showMkg = true" style="padding:0 10px;background: #0093FF">毛重添加</h3>
				  </div>
				  <div class="zd3-btm">
				    <el-table :data="mkgData" style="width: 100%;border-radius: 8px;">
				      <el-table-column type="index" align="center" label="序号" width="80" fixed="left" />
							<el-table-column align="center" prop="maozhong" label="毛重" />
							<el-table-column align="center" prop="insertTime" label="创建日期" />
							<el-table-column align="center" width="200" label="操作">
							  <template slot-scope="scope">
									<el-button type="text" size="small" @click="mkgWrite(scope.row,scope.$index)">修改</el-button>
							    <el-popconfirm
							      placement="top"
							      hideIcon
							      title="是否要删除此行？"
							      @onConfirm="deleteMao(scope.row)"
							    >
							      <el-button type="text" size="small" slot="reference">删除</el-button>
							    </el-popconfirm>
							  </template>
							</el-table-column>
				    </el-table>
				    <el-pagination
				      background
				      hide-on-single-page
				      layout="prev, pager, next"
				      :total="total"
				      @prev-click="goPrev"
				      @next-click="goNext"
				    />
				  </div>
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-dialog :visible.sync="showJkg" title="净重添加" :modal-append-to-body="false" :modal="true" width="60">
		  <div class="change">
		    <p>
		      <span>净重</span>
		      <input type="text" v-model="jkg" placeholder="请输入净重" />
		    </p>
		  </div>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="showJkg = false">取消</el-button>
		    <el-button type="primary" @click="saveJkg" :loading="isClick">保存</el-button>
		  </div>
		</el-dialog>
		<el-dialog :visible.sync="showMkg" title="毛重添加" :modal-append-to-body="false" :modal="true" width="60">
		  <div class="change">
		    <p>
		      <span>毛重</span>
		      <input type="text" v-model="mkg" placeholder="请输入毛重" />
		    </p>
		  </div>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="showMkg = false">取消</el-button>
		    <el-button type="primary" @click="saveMkg" :loading="isClick">保存</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
import { getJingzhong,addJingzhong,updateJingzhong,deleteJingzhong,getMaozhong,addMaozhong,updateMaozhong,deleteMaozhong } from '@/api/ewmApi'
let kgid = null	
	export default{
		data(){
			return{
				jkgData:[],
				mkgData:[],
				total: 1,
				jkg: '',
				jkgIndex: -1,
				mkg: '',
				mkgIndex: -1,
				showJkg: false,
				showMkg: false,
				loading: true,
				searchMz: '',
				searchJz: '',
				isClick: false
			}
		},
		mounted(){
			this.getjing()
			this.getmao()
		},
		methods:{
			getjing(){
				getJingzhong({jingzhong: this.searchJz ? this.searchJz : null}).then(res => {
					console.log(res)
					this.jkgData = res.data
					this.loading = false
				})
			},
			getmao(){
				getMaozhong({maozhong: this.searchMz ? this.searchMz : null}).then(res => {
					console.log(res)
					this.mkgData = res.data
					this.loading = false
				})
			},
			jkgWrite(item,index){
				console.log(item)
				this.showJkg = true
				kgid = item.id
				this.jkg = item.jingzhong
				this.jkgIndex = index
			},
			mkgWrite(item,index){
				console.log(item)
				this.showMkg = true
				kgid = item.id
				this.mkg = item.maozhong
				this.mkgIndex = index
			},
			resetJing(){
				this.searchJz = ''
			},
			resetMao(){
				this.searchMz = ''
			},
			saveJkg(){
				console.log('净重')
				this.isClick = true
				if(this.jkgIndex != -1){
					updateJingzhong({jingzhong: this.jkg,id:kgid}).then(res => {
						console.log(res)
						this.$message({
							showClose: true,
							message: res.message,
							type: 'success'
						})
						this.getjing()
						this.isClick = false
					})
				}else{
					addJingzhong({jingzhong: this.jkg}).then(res =>{
						console.log(res)
						this.$message({
							showClose: true,
							message: res.message,
							type: 'success'
						})
						this.getjing()
						this.isClick = false
					})
				}
				this.jkgIndex = -1
				this.showJkg = false
			},
			saveMkg(){
				this.isClick = true
				console.log('毛重')
				if(this.mkgIndex != -1){
					updateMaozhong({maozhong: this.mkg,id:kgid}).then(res => {
						console.log(res)
						this.$message({
							showClose: true,
							message: res.message,
							type: 'success'
						})
						this.getmao()
						this.isClick = false

					})
				}else{
					addMaozhong({maozhong: this.mkg}).then(res => {
						console.log(res)
						this.$message({
							showClose: true,
							message: res.message,
							type: 'success'
						})
						this.getmao()
						this.isClick = false
					})
				}
				this.showMkg = false
				this.mkgIndex = -1
			},
			deleteJing(item){
				deleteJingzhong(item.id).then(res => {
					console.log(res)
					this.$message({
						showClose: true,
						message: res.message,
						type: 'success'
					})
					this.getjing()
				})
			},
			deleteMao(item){
				deleteMaozhong(item.id).then(res => {
					console.log(res)
					this.$message({
						showClose: true,
						message: res.message,
						type: 'success'
					})
					this.getmao()
				})
			},
			goPrev(page) {
			  console.log(page)
			},
			goNext(page) {
			  console.log(page)
			},
		}
	}
</script>

<style lang="scss" scoped>
/deep/.el-button--primary {
	color: #fff;
	background-color: #18a05e !important;
	border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
	background: #18a05e !important;
	border-color: #18a05e !important;
	color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
	color: #18a05e;
	background-color: transparent;
}
/deep/.el-button--primary {
	color: #fff;
	background-color: #18a05e;
	border-color: #18a05e;
}
/deep/.el-button--text {
	color: #00c666 !important;
}
/deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
	color: #18a05e;
}
/deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
	color: #18a05e;
}
	.zd3-title{
	  height: 32px;
	  display: flex;
	  align-items: center;
	  // padding: 0 20px;
		margin-bottom: 15px;
	  position: relative;
	  background: #ffffff;
	  // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	
	  > p {
	    font-size: 14px;
	    color: #333;
	    margin-right: 50px;
	
	    > span {
	      padding-right: 20px;
	    }
	
	    > input {
	      width: 200px;
	      height: 32px;
	      // background: #ccc;
	      border-radius: 3px;
	      border: 1px solid #ccc;
	      padding-left: 10px;
	      color: #333;
	    }
	  }
	
	  > h3 {
	    // width: 64px;
	    height: 32px;
			padding: 0 10px;
	    background: #18a05e;
	    border-radius: 3px;
	    // margin: 0 40px 0 60px;
	    color: #fff;
	    font-size: 14px;
	    line-height: 32px;
	    font-weight: 100;
	    text-align: center;
	    cursor: pointer;
	  }
	
	  > h4 {
	    // width: 64px;
	    height: 32px;
	    border-radius: 3px;
	    border: 1px solid rgba(0, 0, 0, 0.1);
	    color: #333;
	    font-size: 14px;
	    line-height: 32px;
	    font-weight: 100;
	    text-align: center;
	    cursor: pointer;
	  }
	}
	.zd3-btm .btn-prev:after {
	  content: "上一页";
	}
	.zd3-btm .btn-next:before {
	  content: "下一页";
	}
	.zd3-btm .btn-prev,
	.zd3-btm .btn-next {
	  width: 65px;
	}
	.zd3-btm {
	  background: rgba(255, 255, 255, 1);
	  // border-radius: 8px;
	  border: 1px solid rgba(0, 0, 0, 0.1);
	  // margin-top: 20px;
	  overflow: hidden;
	  &-title {
	    display: flex;
	    align-items: center;
	    height: 70px;
	    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	    background: #ffffff;
	    > p {
	      text-align: center;
	      font-size: 16px;
	      color: #333;
	    }
		}
		.el-pagination {
		white-space: nowrap;
		padding: 15px 5px;
		color: #303133;
		font-weight: bold;
	}
	  .addDate {
	    margin: 20px 32px 10px 32px;
	    height: 32px;
	    border-radius: 3px;
	    text-align: center;
	    line-height: 32px;
	    font-size: 14px;
	    color: #333;
	    cursor: pointer;
	    border: 1px dashed rgba(0, 0, 0, 0.25);
	  }
	  .el-button--text {
	    margin: 0 15px;
	  }
	}
	.change {
	  display: flex;
	  flex-wrap: wrap;
	  > p {
	    // width: 50%;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    color: #333;
	    /deep/.el-input__inner {
	      width: inherit;
	      background: none;
	      height: 32px;
	      // line-height: 32px;
	      color: #333;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding: 0 25px;
	    }
	    /deep/.el-input__icon {
	      line-height: 32px;
	    }
	    .userselect {
	      // max-width: 250px;
	      flex: 1;
	    }
	
	    > span {
	      display: block;
	      width: 120px;
	      text-align: right;
	      padding-right: 15px;
	    }
	    > input {
	      width: inherit;
	      flex: 1;
	      height: 32px;
	      border-radius: 3px;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding-left: 10px;
	      color: #333;
	    }
	  }
	}
</style>
